<template>
  <div class="templates">
    <div class="show-steps">
      <div class="title">在这里你可以...</div>
      <el-steps :active="stepsFlog" align-center>
        <el-step title="步骤 1" description="点击免费注册，注册一个专属账号并登陆。"></el-step>
        <el-step title="步骤 2" description="在个人中心签到/文章日志区评论/点赞/发布文章等。"></el-step>
        <el-step title="步骤 3" description="在日志获取免费VIP等福利，在技术文章学习技术及探讨。"></el-step>
      </el-steps>
    </div>
    <div class="show-zym">
      <div class="zym">
        <div ref="zymData" class="ss-data" :style="{ top: top + 'px' }">
          <p v-for="data in allZymData" :key="data._id">{{data.text}}</p>
        </div>
      </div>
      <div class="banner">
        <el-carousel height="200px" direction="vertical" :autoplay="true">
          <el-carousel-item v-for="item in banner" :key="item.to">
            <ul>
              <li @click="gotoBannerData(item.to)">
                <div class="img">
                  <img :src="item.url | squareUrlsMain" alt />
                </div>
                <span>{{item.text}}</span>
              </li>
            </ul>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="show-rz">
      <div class="title">
        <span>热门日志：（公开状态）</span>
        <el-pagination
          :hide-on-single-page="flog"
          layout="prev,pager,next"
          :total="allRzData.total"
          :page-size="rzLimit"
          small
          @current-change="handleSizeChange"
        ></el-pagination>
      </div>
      <div class="rz-content">
        <ul class="item">
          <li v-for="data in allRzData.data" :key="data.id" class="list">
            <div class="photo" @click="openDrawer(data)" :style="setImage(data.url)"></div>
            <div class="desc-wrapper">
              <div class="title">
                <i v-if="data.hot" class="el-icon-star-on"></i>
                <span>{{ data.label }}</span>
              </div>
              <div class="desc">
                <span>{{ data.updated | setDate }}</span>
                <el-button size="mini" @click="openDrawer(data)">点击查看 >></el-button>
              </div>
              <div class="name">
                <span>作者：{{ data.userName }}</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="show-ss">
      <div class="title">
        <span>说说排行展示：(公开状态)</span>
        <el-pagination
          :hide-on-single-page="flog"
          layout="prev,pager,next"
          :total="allSsData.total"
          :page-size="ssLimit"
          small
          @current-change="SshandleSizeChange"
        ></el-pagination>
      </div>
      <div class="ss-content">
        <ul>
          <li
            v-for="data in allSsData.data"
            :key="data._id"
            @click="gotoUserInfo(data.user[0]._id)"
          >
            <div class="ss-list">{{data.body}}</div>
            <span>{{data.userName}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { setImage } from "@/public/setBgImage.js";
import { mapState, mapActions } from "Vuex";
export default {
  name: "templates",
  data() {
    return {
      top: 0,
      zymDataHeight: 0,
      rzLimit: 8,
      rzSkip: 0,
      flog: true,
      ssLimit: 8,
      ssSkip: 0,
      qdText: "",
      stepsFlog: 0
    };
  },
  watch: {
    allZymData() {
      if (this.allZymData.length) {
        setTimeout(() => {
          this.zymDataHeight = this.$refs.zymData.offsetHeight;
          this.setTimeOutZym();
        }, 0);
      }
    },
    userName() {
      if (this.userName) {
        this.stepsFlog = 1;
        this.initQdStore({ userName: this.userName })
          .then(res => {
            if (res.data.ok === -1) {
              this.stepsFlog = 2;
            }
          })
          .catch(err => {
            console.log("错误信息：" + err);
          });
      } else {
        this.stepsFlog = 0;
      }
    }
  },
  methods: {
    gotoUserInfo(id) {
      this.$router.push("/userinfo/" + id);
    },
    gotoBannerData(to) {
      this.$router.push("/article/" + to);
    },
    openDrawer(data) {
      this.$router.push("/rz/" + data._id);
    },
    handleSizeChange(data) {
      this.rzSkip = this.rzLimit * (data - 1);
      this.getAllRzData({
        limit: this.rzLimit,
        skip: this.rzSkip
      });
    },
    SshandleSizeChange(data) {
      this.ssSkip = this.ssLimit * (data - 1);
      this.getAllSsData({
        limit: this.ssLimit,
        skip: this.ssSkip
      });
    },
    setTimeOutZym() {
      setTimeout(() => {
        this.top -= 1;
        if (this.top === -this.zymDataHeight) {
          this.top = this.zymDataHeight;
        }
        this.setTimeOutZym();
      }, 20);
    },
    ...mapActions("user", [
      "getAllRzData",
      "getAllSsData",
      "getAllZymData",
      "initQdStore",
      "getBannerData"
    ])
  },
  mounted() {
    this.setImage = setImage;
    this.getBannerData(),
      this.getAllRzData({
        limit: this.rzLimit,
        skip: this.rzSkip
      });
    this.getAllSsData({
      limit: this.ssLimit,
      skip: this.ssSkip
    });
    this.getAllZymData();

    if (this.userName) {
      this.stepsFlog = 1;
      this.initQdStore({ userName: this.userName })
        .then(res => {
          if (res.data.ok === -1) {
            this.stepsFlog = 2;
          }
        })
        .catch(err => {
          console.log("错误信息：" + err);
        });
    } else {
      this.stepsFlog = 0;
    }
  },
  computed: {
    ...mapState("user", [
      "allRzData",
      "allSsData",
      "allZymData",
      "userName",
      "banner"
    ])
  }
};
</script>

<style lang="sass" scoped>
@import '@/assets/default.sass'
.templates
  width: 100%
  overflow: hidden
  >div
    background-color: #fff
    padding: 2%
    width: 100%
  .show-steps
    width: 100%
    height: 200px
    .title
      width: 100%
      height: 60px
      line-height: 30px
      font-size: 16px
      font-weight: 700
      text-align: center
    .el-steps
      width: 100%
      height: 120px
  .show-zym
    width: 100%
    margin-top: 10px
    @include flex(flex-start,flex-start)
    .zym
      flex: 0 0 200px
      height: 200px
      background-color: #aaa
      position: relative
      overflow: hidden
      >img
        width: 100%
        height: 100%
      .ss-data
        padding: 5%
        position: absolute
        width: 100%
        min-height: 100%
        p
          width: 100%
          margin-top: 20px
          line-height: 16px
    .banner
      flex: 1
      width: 100%
      height: 200px
      .el-carousel
        width: 100%
        height: 100%
        ul
          width: 100%
          height: 100%
          li
            width: 100%
            height: 100%
            cursor: pointer
            @include flex(flex-start,flex-start)
            .img
              flex: 0 0 70%
              height: 100%
              @include flex(center,center)
              img
                width: 100%
                min-height: 100%
            span
              flex: 1
              height: 100%
              padding: 5%
              color: #fff
              font-size: 18px
              line-height: 24px
              @include flex(center,center)
  .show-rz
    width: 100%
    margin-top: 10px
    >.title
      width: 100%
      height: 30px
      line-height: 30px
      font-size: 16px
      @include flex(space-between,center)
      span
        flex: 0 0 70%
        overflow: hidden
        text-overflow: ellipsis
        white-space: nowrap
        position: relative
        padding-left: 10px
        display: block
        &:after
          content: ""
          display: block
          width: 5px
          height: 14px
          vertical-align: middle
          background-color: #eb2001
          position: absolute
          left: 0
          top: 8px
      .el-pagination
        height: 100%        
        flex: 1
        @include flex(flex-end,center)  
    .rz-content
      width: 100%
      .item
        width: 100%
        .list
          width: 100%
          padding: 20px
          border-bottom: 1px solid #f6f6f6
          @include flex(space-between,flex-start)
          .photo
            flex: 0 0 20%
            height: 80px
            overflow: hidden
            cursor: pointer
            @include setbackground()
            box-shadow: 2px 2px 5px rgba(0,0,0,.1)
            &:hover
              background-size: contain
          .desc-wrapper
            flex: 0 0 78%   
            overflow: hidden     
            .title
              width: 100%
              height: 30px
              line-height: 30px
              overflow: hidden
              @include text-overflow()
              >i
                color: #f44444
                font-size: 21px
                margin-right: 10px
              >span
                font-size: 18px
                color: #3d3d3d
                font-weight: 700
            .desc
              width: 100%
              height: 30px
              line-height: 30px
              overflow: hidden
              @include flex(space-between,center)
              >span
                height: 30px
                @include text-overflow()
              >img
                width: 26px
                height: 26px
            .name
              width: 100%
              height: 25px
              line-height: 25px
              @include text-overflow()
          &:last-child
            border: none
  .show-ss
    width: 100%
    overflow: hidden
    margin-top: 10px
    .title
      width: 100%
      height: 40px
      line-height: 40px
      font-size: 16px
      @include flex(space-between,center)
      span
        flex: 0 0 70%
        overflow: hidden
        text-overflow: ellipsis
        white-space: nowrap
        position: relative
        padding-left: 10px
        display: block
        &:after
          content: ""
          display: block
          width: 5px
          height: 14px
          vertical-align: middle
          background-color: #eb2001
          position: absolute
          left: 0
          top: 13px
      .el-pagination
        height: 100%        
        flex: 1
        @include flex(flex-end,center)  
    .ss-content
      width: 100%
      overflow: hidden
      ul
        width: 100%
        overflow: hidden
        li
          width: 100%
          height: 60px
          line-height: 60px
          overflow: hidden
          cursor: pointer
          border-bottom: 1px solid #f9f9f9
          @include flex(flex-start,center)
          .ss-list
            flex: 0 0 70%
            overflow: hidden
            text-overflow: ellipsis
            white-space: nowrap
          >span
            flex: 1
            text-align: right
            overflow: hidden
            text-overflow: ellipsis
            white-space: nowrap
            padding-left: 15px
          &:last-child
            border: none
</style>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>

<style lang="sass">
@import '@/assets/default.sass'
.el-pagination
  .el-pager
    @include flex(center,center)
</style>